<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>修改医生页面</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css">
    <style>
        body {
            background-color: #f7f7f7;
        }
        .header {
            background-color: white;
            padding: 10px;
            padding-top: 25px;
            color: black;
            border-radius: 8px 8px 0 0;
        }
        .form-container {
            background-color: white;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
        }
        .form-group label {
            font-weight: bold;
        }
        .form-group input, .form-group select {
            height: 45px;
            font-size: 16px;
        }
        .btn {
            padding: 10px 25px;
            font-weight: bold;
            /*width: 100%;*/
            font-size: 16px;
        }
        .image-preview {
            width: 60px;
            height: 60px;
            object-fit: cover;
            border-radius: 50%;
        }
        .update-button-section{
            width: 60%;
            height:50px;
            display: flex;
            margin-left: -15px;
            justify-content: center;
        }
        .update-button{
            margin-top: 10px;
            width:120px;
        }
        .doctorInfo-input{
            outline:none;
            border: none;
            transition: 0.5s;
            border-bottom:1px gainsboro solid;
        }
        .doctorInfo-input:focus{
            outline:none;
            border: none;
            border-bottom: 1px #0ACCCE solid;
        }
        input::placeholder{
            color:darkgray;
        }
        .footer-section{
            background-color: rgb(35,43,43);
        }
        .footer-logo{
            width:80px;
        }
    </style>
</head>
<body>

<div class="container mt-5">
    <div class="header text-center">
        <h3>修改医生</h3>
    </div>
    <div class="form-container">
        <form th:action="@{/doctor/update}"
              name="myform" method="post"
              th:object="${doctor}"
              class="form-horizontal"
              enctype="multipart/form-data">
            <input  type="hidden" name="people" value="d"/>


            <div class="col-12">
                <div class="row">
                    <div class="col-sm-6 py-1">
                        <div class="form-group row">
                            <label class="col-sm-2 col-form-label">医生名字</label>
                            <div class="col-sm-5">
                                <input type="text" class="doctorInfo-input form-control form-control-lg"
                                       placeholder="请输入医生名字"
                                       th:field="*{name}"/>
                                <input type="hidden" name="id" id="id" th:value="${doctor.id}"/>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6 py-1">
                        <div class="form-group row">
                            <label class="col-sm-2 col-form-label">医生电话</label>
                            <div class="col-sm-5">
                                <input type="text" class="doctorInfo-input form-control form-control-lg"
                                       placeholder="请输入电话"
                                       th:field="*{phone}"/>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6 py-1">
                        <div class="form-group row">
                            <label class="col-sm-2 col-form-label">医生密码</label>
                            <div class="col-sm-5">
                                <input  type="text" class="doctorInfo-input form-control form-control-lg"
                                       placeholder="请输入医生密码"
                                       th:field="*{pwd}"/>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6 py-1">
                        <div class="form-group row">
                            <label class="col-sm-2 col-form-label">医生职称</label>
                            <div class="col-sm-5">
                                <input type="text" class="doctorInfo-input form-control form-control-lg"
                                       placeholder="请输入医生职称"
                                       th:field="*{job}"/>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6 py-1">
                        <div class="form-group row">
                            <label class="col-sm-2 col-form-label">医生挂号费</label>
                            <div class="col-sm-5">
                                <input  type="number" class="doctorInfo-input form-control form-control-lg"
                                       placeholder="请输入医生挂号费"
                                       th:field="*{fee}"
                                       readonly/>
                            </div>
                        </div>
                    </div>



                </div>
            </div>

            <div class="col-sm-6 py-1">
                <!-- 科室名称 -->
                <div class="form-group row">
                    <label class="col-sm-2 col-form-label">科室名称</label>
                    <div class="col-sm-10">
                        <select class="form-control form-control-lg" th:field="*{dId}">
                            <option th:each="dp:${departments}" th:value="${dp.id}" th:text="${dp.dName}"></option>
                        </select>
                    </div>
                </div>
            </div>


            <div class="col-sm-6 py-1">
                <!-- 医生头像 -->
                <div class="form-group row">
                    <label class="col-sm-2 col-form-label">医生头像</label>
                    <div class="col-sm-10">
                        <input type="file" class="form-control form-control-lg" name="fileName"/>
                        <div class="mt-2">
                            <img th:src="${doctor.tx}" class="image-preview" alt="医生头像">
                        </div>
                        <input type="hidden" name="tx" id="tx" th:value="${doctor.tx}"/>
                    </div>
                </div>
            </div>

            <div class="col-sm-6 py-1">
                <!-- 医生详情 -->
                <div class="form-group row">
                    <label class="col-sm-2 col-form-label">医生详情</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control form-control-lg"
                               placeholder="请输入医生详情"
                               th:field="*{note}"/>
                    </div>
                </div>
            </div>

            <!-- 提交按钮 -->
            <div class="update-button-section form-group">
                <div class="update-button">
                    <button type="submit" class="btn btn-sm" style="background-color: #0ACCCE">修改</button>
                </div>
                <div class="update-button">
                    <button type="reset" class="btn btn-sm" style="background-color: black;color:white;">重置</button>
                </div>
            </div>


        </form>
    </div>


<!--    <footer id="page-footer" class=" footer-section panel-footer" style="width: 100%; overflow: hidden;">-->
<!--        <div class="container">-->
<!--            <div class="row footer-top" style="text-align: center;">-->
<!--            </div>-->
<!--            <div class="col-md-12 container" style="background-color: #232B2B">-->
<!--                <center>-->
<!--                    <p>Copyright© 2024 All Rights Reserved. </p>-->
<!--                    <p>重庆师范大学&#45;&#45;校医院</p>-->
<!--                </center>-->

<!--            </div>-->
<!--        </div>-->
<!--    </footer>-->
</div>

</body>
</html>
